
<template>
  <view class="container">
    <!-- 搜索框 -->
    <view class="search-bar">
      <input type="text" v-model="searchQuery" placeholder="按时间搜索:YYYY-MM-DD" class="search-input"/>
      <button class="search-button" @click="filterSalesRecords">搜索</button>
    </view>
	
	<view v-if="salesRecords.length === 0" style='display: flex;flex-direction: column;align-items: center;'>
	  <image src='../../Resources/Image/空空如也.png' style='width: 120px;height:120px;margin-bottom: 10px;'></image>
	  <div><span style="font-size: 20px; font-weight: bold; color: #b3b3b3">这里空空如也</span></div>
	</view>

    <!-- 销售记录列表 -->
    <view class="sales-list">
      <view v-for="(record, index) in salesRecords" :key="index" class="sales-card">
        <view class="card-header">
          <text class="product-id">订单ID：{{ record.id }}</text>
          <text class="transaction-time">{{ record.order_date }}</text>
        </view>
        <view class="card-content">
          <text class="order-id">订单号: {{ record.order_sn }}</text>
          <text class="customer-id">客户SN: {{ record.customer_no }}</text>
          <text class="customer-name">客户名称: {{ record.customer_name }}</text>
          <text class="order-amount">订单金额: ¥{{ record.order_amount }}</text>
          <text class="order-type">订单类型: {{record.order_type}}</text>
          <text class="order-time">订单时间: {{ record.order_date }}</text>
          <text class="settlement-type">结算类型: {{record.pay_type}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { config } from '../../config';
import { LoginState } from '../../util/LoginSate';
import { onPullDownRefresh , onReachBottom } from "@dcloudio/uni-app";

const salesRecords = ref([
	//销售记录表
]);

const AllsalesRecords = ref([])

const searchQuery = ref('');
const filteredSalesRecords = ref([...salesRecords.value]);

onMounted(()=>{
	if(!LoginState()){
		uni.showToast({
		  title: '登录失效',
		  icon: 'error'
		});

		uni.redirectTo({
			url:"/pages/index/index"
		})
		return ;
	}
	AllInfo();
})

//分页对象
let pageinfo = ref({
	size:3,
	page:1
})

//下拉刷新和触底加载
onPullDownRefresh(()=>{
	pageinfo.value.page = 1;
	AllsalesRecords.value  =[]
	salesRecords.value = []
	AllInfo()
	uni.stopPullDownRefresh()
})

onReachBottom(()=>{
	AllInfo()
})


function AllInfo(){
	uni.request({
		url:`${config.baseURL}/OutBindHistory/CardInfo`,
		method:'POST',
		data:pageinfo.value,
		header: {
			'content-type': 'application/json' // 设置请求头为 JSON
		},
		success:(res)=>{
			if(res.data.data === 'error'){
				uni.showToast({
				  title: '数据库错误',
				  icon: 'error'
				});
			}
			else {
				
				let data = JSON.parse(res.data.data);
				
				salesRecords.value.push(...data);
				
				for(let i=0;i<salesRecords.value.length;i++){
					if(salesRecords.value[i].order_type === 'S'){
						salesRecords.value[i].order_type = "销售"
					}
					else if(salesRecords.value[i].order_type === 'R'){
						salesRecords.value[i].order_type = "退货"
					}
					if(salesRecords.value[i].pay_type === 'Y'){
						salesRecords.value[i].pay_type = "已结算"
					}
					else if(salesRecords.value[i].pay_type === 'N'){
						salesRecords.value[i].pay_type = "未结算"
					}
					else if(salesRecords.value[i].pay_type === 'U'){
						salesRecords.value[i].pay_type = "部分结算"
					}
				}
				console.log("接受到数据"+JSON.stringify(salesRecords.value));
				AllsalesRecords.value = salesRecords.value
				pageinfo.value.page+=pageinfo.value.size
			}
		},
		fail:(err)=>{
			uni.showToast({
			  title: err.errMsg,
			  icon: 'error'
			});
		}
	})
}

function filterSalesRecords() {
  if(searchQuery.value === ''){
	  salesRecords.value = AllsalesRecords.value
	  return ;
  }
  const searchedGoods = AllsalesRecords.value.filter(item => item.order_date === searchQuery.value);
  console.log("查询出数据"+JSON.stringify(searchedGoods))
  salesRecords.value = searchedGoods;
}

function toggleCard(index) {
  const record = filteredSalesRecords.value[index];
  record.expanded = !record.expanded;
}
</script>

<style scoped>
.container {
  padding: 20px;
  background-color: #f0f4f8;
}

.search-bar {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 10px;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.search-input {
  flex-grow: 1;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #d4d6d9;
  margin-right: 10px;
}

.search-button {
  background-color: #3b82f6;
  color: white;
  border: none;
  border-radius: 8px;
  height: 40px;
  font-size: 16px;
  padding: 0 20px;
}

.product-id, .product-name, .transaction-time {
  margin-right: 10px;
}

.sales-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sales-card {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.3s;
}

.sales-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  border-bottom: 1px solid #e5e7eb;
}

.card-content {
  display: flex;
  flex-direction: column;
  padding: 15px;
  background-color: #fafafa;
}

.order-id, .customer-id, .customer-name, .order-amount, .order-type, .order-time, .settlement-type {
  margin: 5px 0;
}

</style>